<!-- ./idFieldRender.vue 文件 -->
<template>
    <div>
        <!-- 自定义 -->

        <el-tooltip :disabled="state.hasSelection" placement="top">
            <span>
                <div ref="buttonRef" v-click-outside="hide" type="primary" class="ml15 pointer" >
                    {{ state.value2 }}
                </div>
                <el-text v-if="state.value <= 0" style="margin-top: 5px; font-size: 13px;" type="danger">{{ t('未付款') }}</el-text>
                <el-text v-if="state.value >= props.renderRow.amount && props.renderRow.amount > 0" style="margin-top: 5px; font-size: 13px;" type="success">{{ t('已付款') }}</el-text>
                <el-text v-if="state.value > 0 && parseInt(state.value) < parseInt(props.renderRow.amount)" style="margin-top: 5px; font-size: 13px;" type="warning">{{ t('部分付款') }}</el-text>
            </span>
        </el-tooltip>
        <el-popover
            ref="popoverRef"
            :virtual-ref="buttonRef"
            trigger="click"
            virtual-triggering
            placement="bottom"
            :width="200"
            :height="200"
        >
            <div>
                <el-input v-model="state.new_value" type="number" placeholder="请输入付款金额" />
                <div style="margin-top: 10px; text-align: right;">
                    <span @click="hide" class="btn">{{ t('关闭') }}</span>
                    <span @click="save" class="btn btn-primary" style="margin-left: 10px;">
                        <Icon v-if="state.loading == true" name="el-icon-Loading" class="is-loading" style="font-size: 14px; color: #fff; position: relative; top: 2px; left: -2px;" />
                        {{ t('保存') }}
                    </span>
                </div>
                
            </div>
        </el-popover>
    </div>
</template>

<script setup lang="ts">
import { TableColumnCtx, ElInput } from 'element-plus'
import { reactive, ref, nextTick } from 'vue';
import { updatePayAmountApi } from '/@/api/most/customer/order'
import { ElNotification } from 'element-plus'
import { number } from 'echarts';

import { useI18n } from 'vue-i18n'

import { number_format } from '/@/utils/common'

const { t } = useI18n();

// 自定义

const inputRef = ref()

const buttonRef = ref();
const popoverRef = ref();

// BuildAdmin将自动为此组件传递五个Props
interface Props {
    renderValue: any // 单元格值
    renderRow: TableRow // 当前行数据
    renderField: TableColumn // 当前列数据
    renderColumn: TableColumnCtx<TableRow> // 当前列上下文数据
    renderIndex: number // 当前行号
}
const props = defineProps<Props>()

const state = reactive({
    edit: false,
    num: number,
    new_value: '',
    value: props.renderRow.pay_amount,
    value2: props.renderValue,
    loading: false,
    name: '',
    hasSelection: true,
    prop: '',
    visible: false
})

const hide = () => {
    popoverRef.value.hide();
};

console.log(state.value)
console.log(props.renderRow.amount)


const save = () => {
    if(state.loading == true) return;
    if(state.new_value == null || state.new_value == '' || state.new_value < '0'){
        ElNotification({
            message: t('请输入付款金额'),
            type: 'error',
        });
        return;
    }
    state.loading = true;
    state.edit = false;
    updatePayAmountApi({id:props.renderRow.id, new_value: state.new_value}).then((e) => {
        state.loading = false;
        if(e.code == 1){
            state.value2 = number_format(state.new_value) + ' CNY'
            state.value = state.new_value;
            state.new_value = '';
            hide();
        }else{

        }
        
    }).catch((err) => {
        
        state.loading = false;
        console.log(err)
    })
}

const edit = () => {
    state.show = true;
    alert()
    nextTick(() => {
        inputRef.value.focus();
    })
}

</script>

<style scoped lang="scss">
// 自定义
.pointer{
    cursor: pointer;
    user-select: none;
}
.pointer:hover{
    color: #409eff!important;
}
.agency-fee-input{
    width: 150px;
}
</style>